<template>
	<view>
		<image class="background" :src="background" mode="aspectFill"></image>
		<view class="container"
			:style="'padding-top:' + (height * 2-20) + 'px; background-size: 100%; background-repeat:no-repeat; color:#fff; background-attachment: fixed; height: 100%;'">
			<view style="font-size: 32.76px">{{ info.city }}<text style="font-size: 12px;padding-left: 10px;"
					@click="showModel">切换</text></view>
			<view>{{ info.wea }}</view>
			<view style="font-size: 65.52px">{{ info.tem }}°</view>
			<view style="padding: 0 0 20px 0">
				<text decode>最高{{ info.tem_day }}°&nbsp;&nbsp;&nbsp;最低{{ info.tem_night }}°</text>
			</view>
			<!-- air -->
			<view style="margin: 23.4rpx">
				AQI {{ info.air }}
				<view style="position: relative">
					<text
						:style="'position: absolute; background-color: #fff; border-radius: 50%; width: 35.1rpx; height: 35.1rpx;top:2px; left:' + aircircle + 'rpx;'"></text>
					<image src="/static/img/air_bg.png" mode="widthFix" style="width: 100%"></image>
				</view>
			</view>
			<!-- dayinfo -->
			<view style="font-size: 23.4rpx; padding: 23.4rpx; text-align: left">
				<view
					style="border-bottom: 1px solid rgba(190, 185, 185, 0.5); padding-top: 23.4rpx; padding-bottom: 23.4rpx">
					<view style="width: 50%; float: left">
						<view style="color: #d8d6d6">湿度</view>
						<view style="font-size: 42.12rpx">{{ info.humidity }}</view>
					</view>
					<view style="width: 50%; float: left">
						<view style="color: #d8d6d6">风向</view>
						<view style="font-size: 42.12rpx">{{ info.win }}</view>
					</view>
					<view class="clearfix"></view>
				</view>
				<view
					style="border-bottom: 1px solid rgba(190, 185, 185, 0.5); padding-top: 23.4rpx; padding-bottom: 23.4rpx">
					<view style="width: 50%; float: left">
						<view style="color: #d8d6d6">气压</view>
						<view style="font-size: 42.12rpx">{{ info.pressure }}百帕</view>
					</view>
					<view style="width: 50%; float: left">
						<view style="color: #d8d6d6">风</view>
						<view style="font-size: 42.12rpx">{{ info.win_meter }} {{ info.win_speed }}</view>
					</view>
					<view class="clearfix"></view>
				</view>
				<view
					style="border-bottom: 1px solid rgba(190, 185, 185, 0.5); padding-top: 23.4rpx; padding-bottom: 23.4rpx">
					<view style="width: 50%; float: left">
						<view style="color: #d8d6d6">降雨概率</view>
						<view style="font-size: 42.12rpx">58%</view>
					</view>
					<view style="width: 50%; float: left">
						<view style="color: #d8d6d6">紫外线</view>
						<view style="font-size: 42.12rpx">120</view>
					</view>
					<view class="clearfix"></view>
				</view>
				<view style="font-size: 23.4rpx; color: #d8d6d6; padding: 23.4rpx 0">数据来源：TianqiAPI.com (天气api)</view>
			</view>
		</view>
	</view>
</template>

<script>
	import QQMapWX from '../../utils/qqmap-wx-jssdk.js'
	const app = getApp();
	export default {
		data() {
			return {
				height: 0,
				background: 'https://xintai.xianguomall.com/skin/bg_sun.jpg',
				info: {},
				aircircle: 0,
				screenWidth: 0,
				qqmapsdk: new QQMapWX({
					key: 'BGWBZ-2O4LD-HZY4W-PVZDZ-BG76E-SJFRO'
				})
			};
		},
		onLoad() {
			uni.showLoading({
				title:'加载中',
				mask:true
			})
			let that = this
			uni.getSetting({
				success(res) {
					console.log(res)
					// 如果没有授权
					if (!res.authSetting['scope.userLocation']) {
						// 则拉起授权窗口
						uni.authorize({
							scope: 'scope.userLocation',
							success() {
								uni.getLocation({
									type: 'gcj02',
									success: (res => {
										console.log(res, 111)
										const latitude = res.latitude
										const longitude = res.longitude
										that.getLocal(latitude, longitude); //获取所在位置的经纬度
									})
								})
							}
						})
					} else {
						uni.getLocation({
							type: 'gcj02',
							success: (res => {
								console.log(res, 111)
								const latitude = res.latitude
								const longitude = res.longitude
								that.getLocal(latitude, longitude); //获取所在位置的经纬度
							})
						})
					}
				}
			})
		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res);
					this.height = res.statusBarHeight
					this.screenWidth = res.screenWidth
				}
			});
		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			var that = this; // 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: '今日天气',
				// 默认是小程序的名称(可以写slogan等)
				path: '/pages/index/index',
				// 默认是当前页面，必须是以‘/’开头的完整路径
				imageUrl: '',
				//自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: function(res) {
					// 转发成功之后的回调
					if (res.errMsg == 'shareAppMessage:ok') {}
				}
			};
			return shareObj;
		},
		methods: {
			getLocal(latitude, longitude) {
				this.qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: (res => {
						console.log(res);
						let city = res.result.ad_info.district
						let c = city.substring(0, city.length - 1)
						console.log(c)
						this.getData(c)
					})
				});
			},
			showModel() {
				uni.showModal({
					title: '城市',
					editable: true,
					placeholderText: '请输入城市名称',
					success: (re) => {
						console.log(re)
						if (re.confirm) {
							uni.showLoading({
								title:'加载中',
								mask:true
							})
							let content = re.content;
							this.getData(content)
						}
					}
				})
			},
			getData(city) {
				console.log('获取的城市:  ' + city)
				uni.request({
					url: app.globalData.apiurl + '?unescape=1&appid=' + app.globalData.appid + '&appsecret=' + app
						.globalData.appsecret + '&city=' + city,
					method: 'POST',
					success: (res) => {
						console.log(res.data); // success
						uni.hideLoading()
						if (res.statusCode == 200) {
							console.log('ajax _ success'); // 计算aqi位置
							var aqi = res.data.air / 300;
							var circle = (this.screenWidth - 0) * aqi; // 计算背景图
							if (res.data.wea.match(RegExp(/晴/))) {
								var bg = 'https://xintai.xianguomall.com/skin/bg_sun.jpg';
							} else {
								var bg = 'https://xintai.xianguomall.com/skin/bg_yin.jpg';
							}
							this.background = bg
							this.aircircle = circle
							this.info = res.data
							uni.setStorageSync("info", res.data)
							console.log('circle: ' + this.aircircle);
						}
					}
				});
			}
		}
	};
</script>
<style>
	.background {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -1;
	}

	.hlist {
		display: inline-flex;
	}

	.hitem {
		padding: 0 23.4rpx;
		width: 50px;
	}

	.week {
		font-size: 32.76rpx;
		position: relative;
		text-align: center;
		margin-top: 11.7rpx;
	}

	.weekday {
		position: absolute;
		left: 10px;
		top: 7.02px;
		font-size: 28.08rpx;
	}

	.weekmax {
		position: absolute;
		right: 70px;
		top: 7.02px;
	}

	.weekmin {
		color: #ebe7e7;
		position: absolute;
		right: 20px;
		top: 7.02px;
		text-align: left;
	}

	.smalltext {
		text-align: left;
		border-top: 1px solid rgba(190, 185, 185, 0.5);
		border-bottom: 1px solid rgba(190, 185, 185, 0.5);
		padding: 23.4rpx;
		font-size: 28.08rpx;
	}
</style>
